<template>
  <div class="wrap">
    <div class="wrapper">
      <Top :projectId="baojing"></Top>
      <div class="shu-moluai">

<div class="sideba">
     
          <div class="right-sidebar">
            <div class="cewen-bar"> 组织管理 </div>
            <div class="conn-bar" id="style-1">
              <div class="item-conn lie-bg1" >
                   组织管理
                </div>
                <div class="item-conn lie-bg" @click="renyuan()" >
                   人员管理
                </div>
                <div class="item-conn lie-bg" @click="yuzhi()" >
                   阈值管理
                </div>
                 <!-- <div class="item-conn lie-bg" @click="shishi()" >
                  实时数据
                </div>
                <div class="item-conn lie-bg" @click="chaobiao()">
                  抄表数据
                </div> -->
              <!-- <div class="empty" v-if="departList.length == 0">
                暂无部门
              </div>
              <div v-else>
                  <div
                    class="item-conn" v-for="(item, index) in departList" :key="index"
                    :class="index == currentIndex ? 'lie-bg1' : 'lie-bg'"
                    @click="goDepartEquip(index,item.deptId)" 
                  >
                    {{ item.name }}
                  </div>
              </div> -->
            </div>
            </div>
        </div>






          <div class="main-dianli-bottom" id="style-1">
             <div class="mainbg-tit">传感器电压</div>
             
             <!-- <div class="bujv"  style="height:40px">
        <div class="gy-chanxun"  @click="dialogFormVisible = true">新增人员</div>
      </div> -->
				<!-- 一组结束 -->






				<div class="con-dianvv1" >
          <el-table
    :data="userlist"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'has_children'}">
    <el-table-column
      prop="name"
      label="部门名称"
    >
    </el-table-column>
    <el-table-column
      prop="owner"
      label="负责人"
     >
    </el-table-column>
    <el-table-column
      prop="phone"
      label="联系电话">
    </el-table-column>
    <el-table-column
      prop="update_datetime"
      label="更新时间">
    </el-table-column>

   
     <!-- <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="editfun(scope.row)" >编辑</el-button>
      </template>
    </el-table-column> -->
  </el-table>





				 <!-- <table>
          <tr>
            
            <td class="tuniao">部门名称</td>
            <td class="tuniao">负责人</td>
            <td class="tuniao">手机号</td>

            <td class="tuniao biaowidth">操作</td>
          </tr>
          <tr v-for="(item,index) in userlist" :key= "index">
            <td >{{item.name}}</td>
            <td class="lanse" >
              {{item.owner}}
              </td>
            <td class="lvse">{{item.phone}}</td>
 
            <td class="huang">
                <el-button icon=" el-icon-edit" class="xinanniu" @click="editfun(item)"></el-button> 
                <el-popconfirm title="确定删除该信息？" @confirm="delefun(item,index)">
                  <el-button type="danger" icon="el-icon-delete" :disable="dis"  slot="reference"  ></el-button>
                </el-popconfirm>
                <el-button type="warning" icon="el-icon-refresh-left" @click="chongzhifun(item.id)">重置</el-button>
              </td>
          </tr>
        </table> -->
				</div>


        



        <div class="fenye">
                  <el-pagination
                    background
                          @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="total" class="fenyone">
                  </el-pagination>
                </div>
				<!-- 右边模块一 -->
				
				
				
			</div>

        <!-- 右边结束 -->
      </div>
    </div>
  </div>
</template>
<script>
import Top from "../../components/common/top.vue";
export default {
  components: { Top },
  data(){
    var validatePass = (rule, value, callback) => {
      const regPhone = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}')
      if (value == "" || !regPhone.test(value)) {
        callback(new Error('密码必须包含数字和字母，且长度不能少于8位'));
      }else{
        callback();
      }
      };
      var validatetel= (rule, value, callback) =>{
        const regPhone = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
      if (value == "" || !regPhone.test(value)) {
        callback(new Error('请输入正确的手机号'));
      }else{
        callback();
      }
      };
       var validatepasstwo = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.chongzhiform.password) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return{
       baojing:0,//不想
       total:0,
      pageSize:12,
      current:1,
      currentIndex:0,
      pId:'',
      //{name:"权限",id:"3"},{name:"角色",id:'4'}
      departList:[{name:"组织管理",id:"1"},{name:"用户管理",id:"2"},{name:"阈值管理",id:"5"}],

      
      
      dis:false,
      dialogFormVisible: false,
      form: {
          name: '',
          password: '',
          username: '',
          phone:''
        },
        formLabelWidth:'100px',
        statusname:'启用',
        registerRules: {
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
        password: [
          { validator: validatePass,required: true, trigger: 'blur' }
        ],
        phone: [
          { validator: validatetel, trigger: 'blur' }
        ],
        },
        dialogchongzhiVisible: false,
        chongzhiform: {
          id:'',
          password: '',
          re_password: '',
        },
        chongzhiRules: {
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        re_password: [
          { validator: validatepasstwo, trigger: 'blur' }
        ],
        },
        editform :{
          name: '',
          status:true,
          username: '',
          phone:''
        },
        dialogeditVisible: false,
       editRules: {
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 5, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur' }
          ],
        phone: [
          { validator: validatetel, trigger: 'blur' }
        ],
        },
       userlist:[],

tableData1: []
     
    }
  },
  beforeDestroy() {
    clearInterval(this.tm2);
  },
  mounted(){
    this.setdeptfun()
    this.warningfun()
    this.tm2 = setInterval(() => {
      this.warningfun()
    }, 30000);
  },
  methods:{


    load(tree, treeNode, resolve) {
      console.log(tree.id)
      this.loginLoading = true;
      this.$apiv.setdept({lazy:1,parent:tree.id}).then((res) => {
         console.log("99999",res.data.data)

          resolve(res.data.data)


        
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
        // setTimeout(() => {
        //   resolve([
        //     {
        //       id: 31,
        //       date: '2016-05-01',
        //       name: '王小虎',
        //       address: '上海市普陀区金沙江路 1519 弄'
        //     }, {
        //       id: 32,
        //       date: '2016-05-01',
        //       name: '王小虎',
        //       address: '上海市普陀区金沙江路 1519 弄'
        //     }
        //   ])
        // }, 1000)
      },



 renyuan(){
      this.$router.push({path:'/set'})
    },
      zuzhi(){
      this.$router.push({path:'/organization'})
    },
    yuzhi(){
    this.$router.push({path:'/limit'})
    },
    chaobiao(){
      this.$router.push({path:'/meterreading'})
    },
    shishi(){
      this.$router.push({path:'/realtime'})
    },

     editfun(shujv){
    this.editform = shujv
    this.dialogeditVisible = true
   },
   delefun(shujv,index){
    this.loginLoading = true;
      this.$apiv.deleuser({pk:shujv.id}).then((res) => {
        console.log("这个",res.data)
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
          this.userlistfun()
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
      // this.userlist.splice(index, 1)
   },

   chongzhifun(shujv){
    this.chongzhiform.id= shujv
    this.dialogchongzhiVisible = true
   },
 submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          // @click="dialogFormVisible = false" 
          if (valid) {
              console.log('数据', this.form)
              this.loginLoading = true;
              this.$apiv.adduser(this.form).then((res) => {
                console.log("ggg",res.data)
                this.dialogFormVisible=false
                this.userlistfun()
                this.loginLoading = false;
              })
              .catch((res) => {
                this.loginLoading = false;
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

       editsubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          if (valid) {
              console.log('数据', this.form)
              this.loginLoading = true;
              this.$apiv.edituser(this.editform).then((res) => {
                console.log("ggg",res.data)
                this.dialogeditVisible=false
                this.userlistfun()
                this.loginLoading = false;
              })
              .catch((res) => {
                this.loginLoading = false;
              });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },

       chongzhisubmitForm(formName) {
        this.$refs[formName].validate((valid) => {
          console.log(valid)
          // @click="dialogFormVisible = false" 
          if (valid) {
            console.log('数据', this.chongzhiform)
            this.loginLoading = true;
              this.$apiv.chongzhiuser(this.chongzhiform).then((res) => {
                console.log("ggg",res.data)
                this.dialogchongzhiVisible=false
                this.userlistfun()
                this.loginLoading = false;
              })
              .catch((res) => {
                this.loginLoading = false;
              });

          } else {
            console.log('error submit!!');
            return false;
          }
        });
        // this.dialogFormVisible=false
      },
      

    warningfun(){
       this.loginLoading = true;
      this.$apiv.warning({}).then((res) => {
        console.log("ggg",res.data)
         if(res.data.is_ok== true){
          this.baojing = 1
        }else{
          this.baojing = 0
        }
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    setdeptfun(){
      this.loginLoading = true;
      this.$apiv.setdept({lazy:1}).then((res) => {
        console.log("99999",res)
         this.userlist = res.data.data
         this.userlist.forEach(item => {
          if(item.has_children > 0){
            item.has_children = true 
          }
         })
           this.total = res.data.total
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
    goDepartEquip(index,id){
      this.currentIndex = index
      this.pId = id
      console.log(this.pId)
  
    },
    voltagedetailfun(){
      this.loginLoading = true;
      this.$apiv.voltagedetail({page:this.current,limit:this.pageSize}).then((res) => {
        console.log(res.data)
          this.equipList = res.data.data
					this.total = res.data.total
          this.loginLoading = false;
        })
        .catch((res) => {
          this.loginLoading = false;
        });
    },
     handleCurrentChange(val){
       console.log(`当前页: ${val}`)
      this.current = val
      this.setdeptfun()
    },
  },
};
</script>

<style scoped lang="scss">
@import url("../../../static/zhuti.css");
 /deep/ .el-table--border, .el-table--group {
    border: 1px solid transparent;
    border-top: 1px solid  #055288;
   
}
/deep/ .el-table--border::after, .el-table--group::after, .el-table::before {
background-color: #055288
}
 /deep/ .el-table--border th.el-table__cell, .el-table__fixed-right-patch{
border-left: 1px solid #055288;
border-top: 0px solid #055288;
border-right: 0px solid #055288;
border-bottom: 0px solid #055288;
}
/deep/ .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
  border-left: 1px solid #055288;
border-top: 1px solid #055288;
border-right: 0px solid #055288;
border-bottom: 0px solid #055288;
}
/deep/ .el-table {
  background-color: transparent;


  th,
  td {
    background-color: transparent;
  }
  .el-table__expanded-cell {
    background-color: transparent !important;
  }

  // 表头背景色
  th.el-table__cell {
     height: 45px;
    background-color:#011543;
    color: #fff;
  }
  tr > td {
    height: 45px;
    background-color:#011543;
    color: #fff;
  }

  // hover效果
  tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  tbody tr:hover > td {
    background-color:#011543 !important;
    // text-align: center;
  }
}

</style>